@import 'reset';

.header {
    padding-top: vw(22);
    padding-right: vw(30);
    padding-bottom: vw(28);
    padding-left: vw(30);
    background-color: #fff;

    h1{
        float: left;

        a{
            display: block;
            width: vw(180);
            height: vw(80);
            text-indent: -100em;
            background: url(../assets/images/logo.png) no-repeat;
            background-size: 100% auto;
        }
    }

    .header-nav{
        float: right;

        a{
            float: left;
            color: $base_color;
            margin-right: vw(20);
            line-height: vw(80);
        }
    }
}

.banner {
    width: 100%;

    img{
        display: block;
        width: 100%;
    }
}

.detail {
    padding: vw(40) vw(50);

    p{
        font-size: vw(26);
        line-height: vw(45);
        color: #221815;
        word-wrap: break-word;
    }
}

.yewufanwei {
    padding-bottom: vw(80);
    background-color: #eee;

    h3{
        line-height: vw(130);
        color: $base_color;
        text-align: center;
    }

    .yewu-list{
        display: flex;
        box-sizing: border-box;

        a{
            flex: 1;
            background-color: $base_color;
            margin: 0 vw(8);

            i{
                display: block;
                width: 100%;
                height: vw(120);
            }

            &:first-child i{
                background: url(../assets/images/icon-01.png) 50% 50% no-repeat;
                background-size: vw(66) auto;
            }

            &:nth-child(2) i{
                background: url(../assets/images/icon-02.png) 50% 50% no-repeat;
                background-size: vw(88) auto;
            }

            &:nth-child(3) i{
                background: url(../assets/images/icon-03.png) 50% 50% no-repeat;
                background-size: vw(90) auto;
            }

            &:last-child i{
                background: url(../assets/images/icon-04.png) 50% 50% no-repeat;
                background-size: vw(88) auto;
            }

            span{
                display: block;
                font-size: vw(16);
                font-weight: 400;
                line-height: vw(50);
                text-align: center;
                color: #fff;
            }
        }
    }
}

.friend-link {
    padding-bottom: vw(80);

    h3{
        line-height: vw(130);
        color: $base_color;
        text-align: center;
    }

    ul{
        display: grid;
        grid-template-columns: vw(120) vw(120) vw(120) vw(120) vw(120) vw(120);
        grid-template-rows: vw(120) vw(120);
        padding-left: vw(16);

        li{
            height: vw(100);
            border: 2px solid rgba(21, 157, 170, .2);
            margin: 0 vw(8);
            box-sizing: border-box;
            overflow: hidden;
            
            a{
                display: block;
                text-align: center;
                line-height: vw(100);
                img{
                    max-width: 70%;
                    vertical-align: middle;
                }
            }
        }
    }
}

.caseList {
    .part{
        padding-top: vw(80);

        h3{
            width: vw(266);
            height: vw(62);
            background: url(../assets/images/banner-title.jpg) no-repeat;
            background-size: 100% auto;
            text-align: center;
            margin: 0 auto;

            i,span{
                display: inline-block;
                vertical-align: top;
            }
            i{
                width: vw(17);
                height: vw(62);
                background: url(../assets/images/icon-08.png) 0 50% no-repeat;
                background-size: 100% auto;
            }
            span{
                font-size: vw(20);
                line-height: vw(62);
                color: $base_color;
            }
        }

        .title-content{
            margin-top: vw(26);
            margin-bottom: vw(50);
            p{
                font-size: vw(18);
                text-align: center;
            }
        }

        .wrap-icon{
            text-align: center;
            img{
                width: vw(119);
                height: vw(120);
                position: relative;
                margin-right: vw(-16);
            }
        }

        .topic-list {
            li{
                img{
                    display: block;
                    width: 100%;
                }
            }
        }

        &:last-child .topic-list{
            li{
                margin-bottom: vw(60);
            }
        }
    }
}

.contact {
    padding-top: vw(80);
    padding-bottom: vw(60);

    .map-content{
        width: vw(662);
        transform: translateX(vw(44));
        background: url(../assets/images/map-bg.png) 50% 100% no-repeat;
        background-size: 100% auto;

        .content-detail{
            padding-top: vw(70);
            margin-left: vw(18);
            margin-right: vw(19);
            border: 2px solid #d9dcdd;
            border-bottom-width: 0; 
            background-color: #fff;

            .info{
                padding-left: vw(70);

                li{
                    min-height: vw(60);
                    margin-bottom: vw(25);

                    i{
                        float: left;
                        width: vw(60);
                        height: vw(60);
                        margin-right: vw(18);
                        border-radius: 50%;
                        background-color: #229da9;
                        background-position: 50% 50%;
                        background-repeat: no-repeat;
                    }

                    &:first-child i{
                        background-image: url(../assets/images/icon-05.png);
                        background-size: vw(32) auto;
                    }

                    &:nth-child(2) i{
                        background-image: url(../assets/images/icon-06.png);
                        background-size: vw(36) auto;
                    }

                    &:last-child i{
                        background-image: url(../assets/images/icon-07.png);
                        background-size: vw(32) auto;
                    }

                    span{
                        font-size: vw(20);
                        line-height: vw(60);
                    }

                }
            }

            .map{
                width: vw(452);
                height: vw(254);
                margin: 0 auto;
                background: url(../assets/images/map.jpg) no-repeat;
                background-size: 100% auto;
            }
        }
        .content-bg{
            height: vw(312);
        }
    }
}